<template>
	<view>
		<view class="cu-list menu">
			<view class="cu-item  ">
				<view class="content">
					<!-- <text class="cuIcon-warn text-yellow"></text> -->
					<text class="">{{i18n.charge.cointype}}</text>
				</view>
				<view class="action">
					<text class=" text-sm">USDT</text>
				</view>
			</view>
		</view>
		<form @submit="" @reset="">

			<view class="cu-form-group">
				<view class="title">{{i18n.charge.lianname}}</view>

			</view>
			<view class="uni-flex uni-row padding-sm cu-form-group" >
				<view class="text" style="width:25%;padding-right: 5px;">
					<button class="cu-btn " :class="type=='trc20' ? 'line-yellow' : 'bg-grey' " @tap="changetype('trc20')">TRC20</button>
				</view>
				<view class="text" style="-webkit-flex: 1;flex: 1;">
					<button class="cu-btn" :class="type=='erc20' ? 'line-yellow' : 'line-grey' " @tap="navTo('/pages/money/charge2')">ERC20</button>
				</view>
				<!-- <view class="text" style="-webkit-flex: 1;flex: 1;">
					<button class="cu-btn" :class="type=='erc20' ? 'line-yellow' : 'bg-grey' " @tap="changetype('erc20')">ERC20</button>
				</view> -->
			</view> 
			<!-- <view class="cu-form-group">
				<view class="title">{{i18n.charge.Number}}</view>
				<input type="number" :placeholder="i18n.charge.inputnumber" value="" v-model="form.number"></input>
			</view> --> 
		</form>
		
		<view class="cu-form-group padding flex flex-direction" v-if="addr == ''" style="padding: 113px 10px;">
			<button class="cu-btn line-yellow"  @tap="creataddr()">{{i18n.charge.makeaddr}}</button> 
		</view>
		
		
		<view class="cu-list grid col-1 no-border" v-if="addr != ''">

			<view class="">
				<canvas canvas-id="qrcode" style="width: 150px;height: 150px;margin: 0 auto;" />
			</view> 
			<!-- <view class="">
				<image :src="myconfig.charge_img[picker[index]]" mode="aspectFit"></image>
			</view> -->
			<view class="cu-item text-left">
				<text class="text-xs nowrap" style="margin-left: 9px;">{{i18n.charge.address}}</text>
				<view style="margin-left: 9px;">
					<view class="text-lg text-cut row">{{addr}}</view>
				</view>

			</view>
			<view class="padding flex flex-direction">
				<button class="cu-btn bg-yellow lg" @tap="copy">{{i18n.charge.CopyAddress}}</button>
			</view>
			<!-- <view class="flex-sub  ">
				<view class="solid-bottom text-xs padding">
					{{i18n.charge.INFO}}
				</view>
			</view> -->

		</view>
		 
		<view class="cu-form-group padding flex flex-direction uni-h6">
			{{i18n.charge.INFO}}
		</view>

		<!-- <view class="padding flex flex-direction">
			<button class="cu-btn bg-yellow lg" @tap="submit">{{i18n.charge.confirm}}</button>
		</view> -->


	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex';
	import uQRCode from '@/common/uqrcode.js'
	export default {
		data() {
			return {
				// picker: ['BTC', 'ETH', 'EMP'],
				type: 'trc20',
				addr: '',
				imgList: [],
				form: {
					number: '',
					payimage: '',
					ptype1: '',
				},
				index: 0,
				address:[]

			}
		},
		computed: {
			...mapState({
				userinfo: state => state.user.userinfo,
				myconfig: state => state.user.myconfig
			}),
			hasLogin() {
				return this.userinfo.id ? true : false
			},
			rule() {
				return this.myconfig.charge;
			},
			charge_rate() {
				return this.myconfig.charge_rate;
			},
			cointype2() {
				return this.myconfig.cointype2;
			},
			i18n() {
				return this.$t('message');
			},
			picker() {
				let arr = [];
				for (let key in this.rule) {
					arr.push(key)
				}
				return arr;
			},
			price() {
				return this.form.number * this.charge_rate[this.type];
			}, 

		},
		onLoad() { 
			uni.setNavigationBarTitle({
				title: this.i18n.charge.title
			}); 
			this.myConfig().catch(e => {});
			// this.addr = this.get_object_first(this.rule);
			// this.form.ptype1 = this.cointype2[this.type];
			this.form.ptype1 = 'wall1';

			// this.make();
		},
		onShow() {
			if (!this.hasLogin) {
				uni.navigateTo({
					url: '/pages/public/login'
				})
			}
			this.getaddr();
		},
		methods: {
			...mapActions(['myConfig']),
			navTo(url) {
				if (!this.userinfo.id) {
					url = '/pages/public/login';
				}
				uni.navigateTo({
					url
				})
			},
			PickerChange(e) {
				console.log(e.detail.value)
				this.index = e.detail.value;
				this.type = this.picker[this.index];
				this.addr = this.rule[this.type];
				// // this.form.ptype1 = this.cointype2[this.type];
				this.form.ptype1 = 'wall1';
				this.make();
			},
			get_object_first(data) {
				for (var key in data)
					return data[key];
			},
			make() {
				uQRCode.make({
					canvasId: 'qrcode',
					componentInstance: this,
					text: this.addr,
					size: 150,
					margin: 10,
					backgroundColor: '#ffffff',
					foregroundColor: '#000000',
					fileType: 'jpg',
					correctLevel: uQRCode.defaults.correctLevel,
					// success: res => {
					// 	console.log(res)
					// }
				})
			},
			copy() {
				// #ifdef H5
				console.log('h5-copy')
				this.copyTitle(this.addr);
				// #endif
				// #ifndef H5
				uni.setClipboardData({
					data: this.addr,
					success: function() {
						console.log('success');
						uni.showToast({
							title: this.i18n.popup.success
						})
					}
				});
				// #endif

			},
			copyTitle(txt) {
				var input = document.createElement("input"); // 创建一个新input标签
				input.setAttribute("readonly", "readonly"); // 设置input标签只读属性
				input.setAttribute("value", txt); // 设置input value值为需要复制的内容
				document.body.appendChild(input); // 添加input标签到页面
				input.select(); // 选中input内容
				input.setSelectionRange(0, 9999); // 设置选中input内容范围
				document.execCommand("copy"); // 复制
				document.body.removeChild(input); // 删除新创建的input标签
				// 只是提示作用。
				uni.showToast({
					title: this.i18n.popup.success
				})
			},
			ChooseImage() {
				uni.chooseImage({
					count: 4, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {

						uni.uploadFile({
							url: this.$host + '/api/common/upload',
							filePath: res.tempFilePaths[0],
							name: 'file',
							formData: {},
							success: (re) => {
								let rr = JSON.parse(re.data)
								console.log(rr)
								if (rr.code) {
									this.imgList.push(res.tempFilePaths[0]);
									this.form.payimage = rr.data.url;
								}
							},
							error: function(res) {
								console.log(res)
							}
						});
					}
				});
			},
			ViewImage(e) {
				uni.previewImage({
					urls: this.imgList,
					current: e.currentTarget.dataset.url
				});
			},
			DelImg(e) {
				uni.showModal({
					title: this.i18n.popup.tips,
					content: this.i18n.popup.confirm2,
					cancelText: this.i18n.popup.cancel,
					confirmText: this.i18n.popup.confirm,
					success: res => {
						if (res.confirm) {
							this.imgList.splice(e.currentTarget.dataset.index, 1);
							this.form.payimage = '';
						}
					}
				})
			},
			submit() {
				this.$http.post('user.Charge.edit', this.form).then(res => {
					this.$api.msg(this.i18n.charge.successINFO);
					// this.getUserPayment()
					setTimeout(() => {
						this.$api.prePage()
					}, 800)
				})
			},
			getaddr(){
				this.$http.post('user.getWallAddress').then(res => {
					// console.log(res)
					 this.address=res.data[0]; 
					 this.addr=this.address[this.type+'address']; 
					 this.make();
				})
			},
			creataddr(){
				let send={
					type:this.type
				}
				this.$http.post('user.editWallAddress', send).then(res => {
					console.log(res)
					if(res.code==1){
						this.getaddr();
					}
					 
				})
			},
			changetype(name){
				this.type=name;
				this.addr=this.address[this.type+'address']; 
				this.make();
			}
		}
	}
</script>

<style>

</style>
